<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: index-header('任务监督系统')" />
    <style>
        /*清楚浮动*/
        .clearfix:after {
            content: '';
            display: block;
            clear: both;
        }

        /*显示不全用...表示*/
        .ellipsis {
            width: 350px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: inline-block;
        }
        /*溢出二行...表示*/
        .ellipsis-notice{
            width: 200px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: inline-block;
        }
        .ellipsis-summary {
            width: 550px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            display: inline-block;
        }
        /*加载中动画*/
        .loaderbox-1 {
            display: none;
            width: 100%;
            text-align: center;
            padding: 10px;
            margin: 5px auto;
            color: #000 !important;
            font-size: 13px;
            font-weight: 400;
            vertical-align: middle;
        }
        .loaderbox-1 .loading-activity-1 {
            position: absolute;
            left: 30%;
            width: 18px;
            height: 18px;
            border: solid 2px transparent;
            border-top-color: #000;
            border-left-color: #000;
            border-radius: 10px;
            -webkit-animation: pace-spinner 400ms linear infinite;
            -moz-animation: pace-spinner 400ms linear infinite;
            -ms-animation: pace-spinner 400ms linear infinite;
            -o-animation: pace-spinner 400ms linear infinite;
            animation: pace-spinner 400ms linear infinite;
        }
        @media (max-width: 767px) {
            .loading-activity-1 {
                width: 18px;
                height: 18px;
            }
        }

        @-ms-keyframes pace-spinner {
            0% {
                -ms-transform: rotate(0deg);
                transform: rotate(0deg);
            }

            100% {
                -ms-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }

        @keyframes pace-spinner {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
        /*转圈动画结束*/
    </style>
</head>
<body>
    <!--导航栏-->
    <div th:replace="include :: headNav"></div>
    <!--中心内容-->
    <div class="container my-container">
        <div class="row">
            <!--左侧列表内容-->
            <div class="col-md-8">
                <!--标签页-->
                <div class="clearfix my-nav">
                    <ul class="nav nav-pills pull-left my-navbar-nav">
                        <!--点击最热后，使用js修改排序方式、然后清空列表内容-->
                        <li class="active get-task"><a href="javascript:;" >任务</a></li>
                        <li class=" get-post"><a href="javascript:;">帖子</a></li>
                    </ul>
                    <ul class="nav nav-pills pull-right my-navbar-nav my-active">
<!--                        <li class="active"><a href="#">限时排序</a></li>-->
<!--                        <li><a href="#">24小时</a></li>-->
<!--                        <li><a href="#">3天</a></li>-->
                    </ul>
                    <button class="btn btn-default btn-success" id="create-task" onclick="createTask()"><span class="glyphicon glyphicon-plus-sign"></span><span>新建任务</span></button>
                    <button class="btn btn-default btn-success" id="create-article" style="display: none" onclick="publish()"><span class="glyphicon glyphicon-plus-sign"></span><span>发布帖子</span></button>
                </div>
                <!--任务-->
                <div class=" task-list-box">
                    <!--分页内容-->
                    <ul id="task_list">
                    </ul>
                </div>
                <!--帖子-->
                <div class="article-list-box" style="display: none">
                    <ul id="article_list">
                    </ul>
                </div>
                <br>
                <br>
            </div>

            <!--右侧列表内容-->
            <div class="col-md-4">
                <!--公告-->
                <div class="layui-carousel" id="announcement" style="margin-bottom: 15px">
                    <div carousel-item >
                        <div th:each="notice:${noticeList}">
                            <div style="padding: 10px;width: 100%;overflow: hidden;" ><a href="javascript:;" th:onclick="goNotice([[${notice.noticeId}]])"  th:text="${notice.noticeTitle}"></a></div>
                        </div>
                    </div>
                </div>
                <!--调用励志名言接口获取-->
                <div class="layui-card">
                    <div class="layui-card-header" style="border-left: solid 5px #2459A2;background-color: #FAFAFA;">励志语录</div>
                    <div class="layui-card-body" style="background-color: rgba(250,250,250,0.4);">
                        <div style="display: block;font-size: 14px;font-weight: bold;padding-bottom: 5px;" th:text="${saying?.english}">Have a great day, start here!</div>
                        <hr>
                        <div style="display: block;font-size: 14px;font-weight: bold;padding-top: 5px" th:text="${saying?.chinese}">美好的一天，从这里开始！</div>
                    </div>
                </div>
                <!--调用必应接口，获取每日图片-->
                <a th:if="${pictureUrl!=null}" target="_blank" th:href="${pictureUrl}"><img th:src="${pictureUrl}" style="width: 100%;height: auto" alt="壁纸"></a>
                <a th:if="${pictureUrl==null}" th:href="@{/img/index/images/homepage_download.png}"><img th:src="@{/img/index/images/homepage_download.jpg}" style="width: 100%;height: auto" alt="壁纸"></a>

                <div><span class="my-span-top">浏览量<span> TOP 10</span></span></div>

                <!--帖子热门榜-->
                <div class="panel panel-default my-panel">
                    <!-- Default panel contents -->
                    <div class="panel-heading">最热榜</div>
                    <!-- List group -->
                    <ul class="list-group my-list-group" id="hot-list">
                        <li><div class="loaderbox-1" style="width: 100%;background-color: white"><div class="loading-activity-1"></div>加载中，请稍候...</div></li>
                    </ul>
                </div>

                <!--用户自律榜-->
                <div class="panel panel-default my-panel" >
                    <!-- Default panel contents -->
                    <div class="panel-heading" style="background-color: #F49900">自律榜</div>
                    <!-- List group -->
                    <ul class="list-group my-list-group" id="conscious-list">

                    </ul>
                </div>

                <!--广告图片-->
<!--                <a href="#"><img th:src="@{/img/index/images/img-footer.jpg}" alt=""></a>-->
            </div>
        </div>
    </div>

    <!--尾部-->
    <div th:replace="include :: footer-nav-index"></div>

    <!--回到顶部图标-->
    <div class="move-top" title="回到顶部"></div>

    <th:block th:include="include :: footer-index"/>
    <script th:src="@{/js/index/index.js}"></script>
    <script th:inline="javascript">
        var flow = layui.flow;
        var util = layui.util;
        var selfUser = [[${selfUser}]]
        //公告轮播
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#announcement'
            ,width: '100%' //设置容器宽度
            ,height:40
            ,arrow: 'none' //始终显示箭头
            ,indicator: 'none'
            ,anim: 'updown' //切换动画方式
        });
        //帖子加载
        flow.load({
            elem: '#article_list' //指定列表容器
            ,isAuto:false
            ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
                var lis = [];
                //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                var url = "/system/article/list";
                var data={
                    pageSize: 10,
                    pageNum: page,
                    isAsc: 'desc',
                    orderByColumn:'articleNewstime'
                    // isDesc:'desc'
                }
                var config = {
                    url: url,
                    type: "post",
                    dataType: "json",
                    data: data,
                    beforeSend: function () {

                    },
                    success: function(result) {
                        if (result.code===0){
                            //假设你的列表返回在data集合中
                            layui.each(result.rows, function(index, item){
                                lis.push('<li style="border-bottom: 1px  solid #eee;padding: 15px 0 15px 0;">\n' +
                                    '    <a href="/system/article/detail/'+item.id+'" target="_blank" class="clearfix" >\n' +
                                    '        <div style="">\n' +
                                    '            <div style="float: left;margin-right: 10px;height: 100px;overflow: hidden;">\n' +
                                    '                <img src="'+item.articleThumbnail+'" alt="" style="width:140px;">\n' +
                                    '            </div>\n' +
                                    '            <div style="float: left" >\n' +
                                    '                <div class="layui-row">\n' +
                                    '                    <h4 style="margin-bottom: 10px;font-size: 16px"><b class="ellipsis">'+item.articleTitle+'</b></h4>\n' +
                                    '                    <div style="color: #999999;margin-bottom: 5px;font-size: 14px" class="ellipsis-summary">'+item.articleSummary+'</div>\n' +
                                    '                    <div style="color: #676a6c;font-size: 12px;font-weight: 400">作者：'+item.articleAuthor+'&nbsp;&nbsp;编辑：'+item.articleEdit+'</div>\n' +
                                    '                </div>\n' +
                                    '                <div class="layui-row" style="color: #999;font-size: 13px;margin-top: 10px">\n' +
                                    '                    <span>'+util.timeAgo(item.articleNewstime)+'</span> 发布</span></span>\n' +
                                    '                </div>\n' +
                                    '            </div>\n' +
                                    '        </div>\n' +
                                    '    </a>\n' +
                                    '</li>')
                            });
                            //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                            //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                            next(lis.join(''), page < result.total/10);
                        }else {
                            layer.open({
                                title: '系统提示'
                                ,content: '加载失败，请稍后再试！！！'
                                ,yes: function(){
                                    layer.closeAll();
                                }
                            });
                        }
                    }
                };
                $.ajax(config)
            }
        });

        //任务加载
        flow.load({
            elem: '#task_list' //指定列表容器
            ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
                var lis = [];
                //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                var url = "/taskcenter/taskcenter/list";
                var data={
                    pageSize: 10,
                    pageNum: page,
                    isAsc: 'desc',
                    orderByColumn:'createTime',
                    // isDesc:'desc'
                }
                var config = {
                    url: url,
                    type: "post",
                    dataType: "json",
                    data: data,
                    beforeSend: function () {

                    },
                    success: function(result) {
                        if (result.code===0){
                            //假设你的列表返回在data集合中
                            layui.each(result.rows, function(index, item){
                                var status = '进行中';
                                if (item.status=='1'){
                                    status = '匹配中'
                                }else if (item.status=='2'){
                                    status = '匹配成功'
                                } else if (item.status=='3'){
                                    status = '进行中'
                                } else if (item.status=='4'){
                                    status = '待评分'
                                }else if (item.status=='5'){
                                    status = '已结束'
                                }else {

                                }
                                if (selfUser!=null&&selfUser.userId==item.userId){
                                    lis.push('<li style="border-bottom: 1px  solid #eee;padding: 15px 0 15px 0">\n' +
                                        '    <a href="javascript:;" onclick="goTaskDetail('+item.id+')" class="clearfix" >\n' +
                                        '        <div>\n' +
                                        '            <div style="float: left;margin-right: 10px;height: 100px;overflow: hidden;">\n' +
                                        '                <img src="'+item.taskThumbnail+'" alt="" style="width:140px;">\n' +
                                        '            </div>\n' +
                                        '            <div style="float: left" >\n' +
                                        '                <div class="layui-row">\n' +
                                        '                    <h4 style="margin-bottom: 10px;font-size: 16px"><b class="ellipsis">'+item.taskTitle+'</b></h4>\n' +
                                        '                    <div style="color: #999999;margin-bottom: 5px;font-size: 14px" class="ellipsis-summary">'+item.taskSummary+'</div>\n' +
                                        '                    <div style="color: #676a6c;font-size: 12px;font-weight: 400">'+status+'</div>\n' +
                                        '                </div>\n' +
                                        '                <div class="layui-row" style="color: #999;font-size: 13px;margin-top: 10px">\n' +
                                        '                    <span>'+util.timeAgo(item.createTime)+'</span> 创建</span></span> <span>&nbsp;|&nbsp;</span><span><i class="fa fa-tags"></i>&nbsp;'+item.tag+'</span>\n' +
                                        '                </div>\n' +
                                        '            </div>\n' +
                                        '        </div>\n' +
                                        '    </a>\n' +
                                        '</li>')
                                } else {
                                    lis.push('<li style="border-bottom: 1px  solid #eee;padding: 15px 0 15px 0">\n' +
                                        '    <a href="/taskcenter/taskcenter/detail/public/'+item.id+'" target="_blank" class="clearfix" >\n' +
                                        '        <div>\n' +
                                        '            <div style="float: left;margin-right: 10px;height: 100px;overflow: hidden;">\n' +
                                        '                <img src="'+item.taskThumbnail+'" alt="" style="width:140px;">\n' +
                                        '            </div>\n' +
                                        '            <div style="float: left" >\n' +
                                        '                <div class="layui-row">\n' +
                                        '                    <h4 style="margin-bottom: 10px;font-size: 16px"><b class="ellipsis">'+item.taskTitle+'</b></h4>\n' +
                                        '                    <div style="color: #999999;margin-bottom: 5px;font-size: 14px" class="ellipsis-summary">'+item.taskSummary+'</div>\n' +
                                        '                    <div style="color: #676a6c;font-size: 12px;font-weight: 400">'+status+'</div>\n' +
                                        '                </div>\n' +
                                        '                <div class="layui-row" style="color: #999;font-size: 13px;margin-top: 10px">\n' +
                                        '                    <span>'+util.timeAgo(item.createTime)+'</span> 创建</span></span> <span>&nbsp;|&nbsp;</span><span><i class="fa fa-tags"></i>&nbsp;'+item.tag+'</span>\n' +
                                        '                </div>\n' +
                                        '            </div>\n' +
                                        '        </div>\n' +
                                        '    </a>\n' +
                                        '</li>')
                                }
                            });
                            //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                            //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                            next(lis.join(''), page < result.total/10);
                        }else {
                            layer.open({
                                title: '系统提示'
                                ,content: '加载失败，请稍后再试！！！'
                                ,yes: function(){
                                    layer.closeAll();
                                }
                            });
                        }
                    }
                };
                $.ajax(config)
            }
        });

        //自律榜加载
        flow.load({
            elem: '#conscious-list' //指定列表容器
            ,isAuto:false
            ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
                var lis = [];
                //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                var url = "/system/user/list";
                var data={
                    pageSize: 10,
                    pageNum: page,
                    isAsc: 'desc',
                    orderByColumn:'grade desc,integral',
                    // isDesc:'desc'
                }
                var config = {
                    url: url,
                    type: "post",
                    dataType: "json",
                    data: data,
                    beforeSend: function () {

                    },
                    success: function(result) {
                        if (result.code===0){
                            //假设你的列表返回在data集合中
                            layui.each(result.rows, function(index, item){
                                var userName= item.userName==null?item.loginName:item.userName
                                lis.push('<li style="border-bottom: 1px  solid #eee;padding: 10px 0 5px 0">\n' +
                                    '    <a href="/system/user/home/'+item.userId+'" target="_blank" class="clearfix">\n' +
                                    '        <div>\n' +
                                    '            <div style="float: left;margin-right: 10px;height: 47px;overflow: hidden;border-radius: 50%;">\n' +
                                    '                <img src="'+item.avatar+'" alt="" style="width: 47px;">\n' +
                                    '            </div>\n' +
                                    '            <div style="float: left">\n' +
                                    '                <div class="layui-row">\n' +
                                    '                    <h4 style="margin-bottom: 10px;font-size: 14px"><b>'+userName+'</b><em style="color: #F49900;margin-bottom: 5px;font-size: 14px"> &nbsp;Lv</em><span  style="color:  #F49900;margin-bottom: 5px;font-size: 14px;">&nbsp;'+item.grade+'</span></h4>\n' +
                                    '                    <div style="color: #676a6c;font-size: 12px;font-weight: 400">标签：'+item.personalLabel+'</div>\n' +
                                    '                </div>\n' +
                                    '            </div>\n' +
                                    '        </div>\n' +
                                    '    </a>\n' +
                                    '</li>')
                            });
                            //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                            //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                            var total = result.total>50?50:result.total
                            next(lis.join(''), page < total/10);
                        }else {
                            layer.open({
                                title: '系统提示'
                                ,content: '加载失败，请稍后再试！！！'
                                ,yes: function(){
                                    layer.closeAll();
                                }
                            });
                        }
                    }
                };
                $.ajax(config)
            }
        });

        $(function () {
            //切换帖子页面
            $('.get-post').click(function () {
                $('.article-list-box').show()
                $('.task-list-box').hide()
                $('#create-article').show()
                $('#create-task').hide()
            })
            //切换任务页面
            $('.get-task').click(function () {
                $('.article-list-box').hide()
                $('.task-list-box').show()
                $('#create-article').hide()
                $('#create-task').show()
            })


            //热榜
            var url= "/hotList";
            var config = {
                url: url,
                type: "get",
                dataType: "json",
                beforeSend: function () {
                    $('.loaderbox-1').show()
                },
                success: function(result) {
                    var data = result.data
                    for (const hot of data) {
                        var li = '<li class="list-group-item">\n' +
                            '         <span class="badge">'+hot.articleViews+'</span>\n' +
                            '         <a href="/system/article/detail/'+hot.id+'">'+hot.articleTitle+'</a>\n' +
                            '     </li>'
                        $('#hot-list').prepend(li)
                    }
                    if (data.length==0){
                        var li = '<li class="list-group-item">热榜为空！！</li>'
                        $('#hot-list').prepend(li)
                    }
                    setTimeout(function(){
                         $('.loaderbox-1').hide()
                    }, 50);
                }
            }
            $.ajax(config)
        })

        //新建任务页面
        function createTask() {
            var url = '/taskcenter/taskcenter/addIndex';
            top.layer.open({
                type : 2,
                title : '新建任务',
                anim : 2,
                area : [ '90%', '90%' ],
                maxmin : true,
                shadeClose: true,
                content : url
            })
        }
        /* 任务详情*/
        function goTaskDetail(taskId) {
            var url = '/taskcenter/taskcenter/detail/'+taskId;
            top.layer.open({
                type : 2,
                title : '任务详情',
                anim : 2,
                area : [ '90%', '90%' ],
                maxmin : true,
                shadeClose: true,
                content : url
            })
        }
        /**任务详情*/
        function goNotice(id) {
            var url = '/system/notice/detail/'+id;
            top.layer.open({
                type : 2,
                title : '公告详情',
                anim : 2,
                area : [ '50%', '60%' ],
                maxmin : true,
                shadeClose: true,
                content : url
            })

        }
    </script>
</body>

</html>
